import React, {useState, useEffect} from "react";
import "./caigou.css";
import {
    Button,
    Table,
    Pagination,
    ConfigProvider,
    Space,
    Modal,
    DatePicker,
    Select, message,
} from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import Ckliebiao from "./ckliebiao/ckliebiao";
import Spliebiao from "./spleibiao/spliebiaos";
import Gongyingshang from "./Gongyingshang";
import service from "../../../service";

export default function Caigou() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibless, setIsModalVisibless] = useState(false);
    const [isModalVisibles, setIsModalVisibles] = useState(false);
    const [isModalVisibleck, setIsModalVisibleck] = useState(false);
    const [isModalVisiblesp, setIsModalVisiblesp] = useState(false);
    const [isModalVisiblegys, setIsModalVisiblegys] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const showModalsp = () => {
        setIsModalVisiblesp(true);
    };

    const handleOksp = () => {
        setIsModalVisiblesp(false);
    };

    const handleCancelsp = () => {
        setIsModalVisiblesp(false);
    };
    const showModalgys = () => {
        setIsModalVisiblegys(true);
    };

    const handleOkgys = () => {
        setIsModalVisiblegys(false);
    };

    const handleCancelgys = () => {
        setIsModalVisiblegys(false);
    };

    const onChange = (date, dateString) => {
        console.log(date, dateString);
    };
    const {Option} = Select;

    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };
    const handleChanges = (value) => {
        console.log(`selected ${value}`);
    };
    const showModalss = () => {
        setIsModalVisibless(true);
    };

    const handleOkss = () => {
        setIsModalVisibless(false);
    };

    const handleCancelss = () => {
        setIsModalVisibless(false);
    };
    const showModals = () => {
        setIsModalVisibles(true);
    };

    const handleOks = () => {
        setIsModalVisibles(false);
    };

    const handleCancels = () => {
        setIsModalVisibles(false);
    };
    const showModalck = () => {
        setIsModalVisibleck(true);
    };

    const handleOkck = () => {
        setIsModalVisibleck(false);
    };

    const handleCancelck = () => {
        setIsModalVisibleck(false);
    };

    const fkarr = ["现金", "银行", "支付宝"];
    const showfkarr = () => {
        fkarr.map((item, index) => {
            return (
                <li style={{display: "flex"}}>
                    <span></span>
                    <span>{item}</span>
                </li>
            );
        });
    };
    const columnss = [
        {
            title: "类型",
            dataIndex: "name_of_commodity",
            key: "name_of_commodity",
            className: "bgColor",
        },
        {
            title: "管理",
            key: "action",
            className: "bgColor",
            render: () => (
                <Space size="middle">
                    <button>修改</button>
                    <button>删除</button>
                </Space>
            ),
        },
    ];
    const datas = [
        {
            key: 1,
            name_of_commodity: "现金付款",
        },
        {
            key: 2,
            name_of_commodity: "支付宝",
        },
        {
            key: 3,
            name_of_commodity: "微信",
        },
    ];

    //采购记录列表
    const purchaseColumns = [
        {
            title: "商品名称",
            dataIndex: "name_of_commodity",
            key: "name_of_commodity",
            className: "bgColor",
        },
        {
            title: "原有库存",
            dataIndex: "old_invertory",
            key: "old_invertory",
            className: "bgColor",
        },
        {
            title: "采购数量",
            dataIndex: "purchase_number",
            key: "purchase_number",
            className: "bgColor",
        },
        {
            title: "存放仓库",
            dataIndex: "warehouse_name",
            key: "warehouse_name",
            className: "bgColor",
        },
        {
            title: "供应商",
            dataIndex: "name",
            key: "name",
            className: "bgColor",
        },
        {
            title: "单价",
            dataIndex: "price_per",
            key: "price_per",
            className: "bgColor",
        },
        {
            title: "总折扣",
            dataIndex: "discount",
            key: "discount",
            className: "bgColor",
        },
        {
            title: "总成本",
            dataIndex: "cost",
            key: "cost",
            className: "bgColor",
        },
        {
            title: "总运费",
            dataIndex: "freight",
            key: "freight",
            className: "bgColor",
        },
        {
            title: "付款方式",
            dataIndex: "terms_of_payment",
            key: "terms_of_payment",
            className: "bgColor",
        },
        {
            title: "备注",
            dataIndex: "note",
            key: "note",
            className: "bgColor",
        },
        {
            title: "经办人",
            dataIndex: "user_name",
            key: "user_name",
            className: "bgColor",
        },
        {
            title: "信息录入",
            dataIndex: "agent",
            key: "agent",
            className: "bgColor",
        },
        {
            title: "采购日期",
            dataIndex: "purchase_time",
            key: "purchase_time",
            className: "bgColor",
        },
        {
            title: "管理",
            key: "action",
            className: "bgColor",
            render: (record) => (
                <Space size="middle">
                    <Button type="primary" danger size="small" style={{borderRadius: "5px"}}
                            onClick={() => handleDelPurchase(record)}>删除</Button>
                </Space>
            ),
        },
    ];
    const [purchaseList, setPurchaseList] = useState([]); //采购记录列表
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [pageSize, setPageSize] = useState(10);
    //删除采购记录
    const handleDelPurchase = (record) => {
        service.writeOffService.DEL_Purchase(record.goods_id, record.id).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getPurchaseList(currentPage, pageSize)
            } else {
                message.error("删除失败")
            }
        }).catch(err => {
            console.log("删除出错了", err);
        })
    }

    //监听分页和每页展示条数的变化
    const onChangePage_Size = (page, size) => {
        setCurrentPage(page)
        setPageSize(size)
    }

    //获取采购列表
    function getPurchaseList(currentPage, pageSize) {
        service.writeOffService.GET_Purchase(currentPage, pageSize).then(data => {
            console.log("采购记录列表", data);
            if (data.code === 200) {
                setTotal(data.count);
                setPurchaseList(data.data);
            }
        }).catch(err => {
            console.log("获取采购记录列表出错了！", err);
        })
    }

    useEffect(() => {
        getPurchaseList(currentPage, pageSize)
    }, [currentPage, pageSize])
    return (
        <div>
            <div className="buttons">
                <Button type="primary" className="sysp">
                    采购记录
                </Button>
                <Button type="primary" className="xzsp" onClick={showModal}>
                    新增采购
                </Button>
            </div>

            <Table columns={purchaseColumns} rowKey={record => record.id} dataSource={purchaseList} pagination={false}/>
            <ConfigProvider locale={zhCN}>
                <Pagination
                    className="GetPages"
                    total={total}
                    onChange={onChangePage_Size}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `总共 ${Math.ceil(total / pageSize)} 页`}
                />
            </ConfigProvider>
            <Modal
                title="新增采购"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                className="xinzengcg"
            >
                <div id="cgmod">
                    <ul>
                        <li style={{display: "flex"}}>
                            <span>商品名称</span>
                            <span>
                <input type="text" disabled/>
                <button className="cglbbut" onClick={showModalsp}>
                  ...
                </button>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>规格</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>型号</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>现有库存</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>新采购数量</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>存放仓库</span>
                            <span>
                <input type="text" disabled/>
                <button onClick={showModalck} className="cglbbut">
                  ...
                </button>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>供应商</span>
                            <span>
                <input type="text" disabled/>
                <button onClick={showModalgys} className="cglbbut">
                  ...
                </button>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>单价</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>总折扣</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>总成本</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>总运费</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>付款方式</span>
                            <span>
                <Select
                    defaultValue="lucy"
                    style={{
                        width: 120,
                    }}
                    onChange={handleChanges}
                    className="cgfk"
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="disabled">Disabled</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <button className="cgfk cgfkbu" onClick={showModalss}>
                  新增
                </button>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>经办人</span>
                            <span>
                <Select
                    defaultValue="lucy"
                    style={{
                        width: 120,
                    }}
                    onChange={handleChange}
                    className="cgfk"
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="disabled">Disabled</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>采购日期</span>
                            <span className="cgrq">
                <DatePicker onChange={onChange}/>
              </span>
                        </li>
                        <li style={{display: "flex"}}>
                            <span>订单商品备注</span>
                            <span>
                <textarea></textarea>
              </span>
                        </li>
                    </ul>
                </div>
            </Modal>
            <Modal
                title="新增付款方式"
                visible={isModalVisibless}
                onOk={handleOkss}
                onCancel={handleCancelss}
            >
                <div id="cgfkmod">
                    <ul>
                        <li style={{display: "flex"}}>
                            <span>新增选项值</span>
                            <span>
                <input type="text"/>
              </span>
                        </li>
                        {fkarr.map((item, index) => {
                            return (
                                <li style={{display: "flex"}} key={item}>
                                    <span></span>
                                    <span className="fkfs">{item}</span>
                                </li>
                            );
                        })}
                        <li className="bjscfk" style={{display: "flex"}}>
                            <Button danger onClick={showModals}>
                                编辑删除付款方式
                            </Button>
                        </li>
                    </ul>
                </div>
            </Modal>
            <Modal
                title="编辑删除付款方式"
                visible={isModalVisibles}
                onOk={handleOks}
                onCancel={handleCancels}
            >
                <div id="cgfkmod">
                    <ul>
                        <li style={{display: "flex"}}>
                            <span>新增选项值</span>
                            <span>
                <input type="text"/>
                <Button className="xxxz">新增</Button>
              </span>
                        </li>
                    </ul>
                    <Table columns={columnss} dataSource={datas} pagination={false}/>
                </div>
            </Modal>
            <Modal
                title="选择仓库"
                visible={isModalVisibleck}
                onOk={handleOkck}
                onCancel={handleCancelck}
                className="ckliebiao"
            >
                <Ckliebiao></Ckliebiao>
            </Modal>
            <Modal
                title="选择商品"
                visible={isModalVisiblesp}
                onOk={handleOksp}
                onCancel={handleCancelsp}
                className="spliebiao"
            >
                <Spliebiao></Spliebiao>
            </Modal>
            <Modal
                title="选择供应商"
                visible={isModalVisiblegys}
                onOk={handleOkgys}
                onCancel={handleCancelgys}
                className="gongyingshang"
            >
                <Gongyingshang></Gongyingshang>
            </Modal>
        </div>
    );
}
